<template>
  <div class="_wz_cent_main _wz_basicStatistics">
    <Row :gutter="10" style="height:450px;">
      <i-col span="14" style="height: 100%;width: calc(100% / 5 * 3);">
        <Row :gutter="10" style="height:120px;margin: 0 0 10px 0;color: #fff;margin-left: -5px;margin-right: -5px;">
          <i-col span="6" style="height: 100%;">
            <Card dis-hover style="height: 100%;background-image: linear-gradient(150deg,#92CCFA , #75ADF9);display:flex;align-items:center;justify-content:center;">
              <div style="float:left;">
                <img src="../../../assets/icon_cheliang.png" style="width:44px;margin: 5px 0 0 0px;" />
              </div>
              <div style="float:left;padding: 0 0 0 20px;text-align: center;">
                <div style="line-height: 30px;font-size: 32px;font-weight: bold">{{!!basicStatisticsData.coreCount?basicStatisticsData.coreCount.coreVehicleCount:0}}</div>
                <div style="line-height: 30px;font-weight: 600">运营车辆</div>
              </div>
              <div style="clear: both;"></div>
            </Card>
          </i-col>
          <i-col span="6" style="height: 100%;">
            <Card dis-hover style="height: 100%;background-image: linear-gradient(150deg,#76C4D9 ,#62A3CB);display:flex;align-items:center;justify-content:center;">
              <div style="float:left;">
                <img src="../../../assets/icon_guache.png" style="width:44px;margin: 5px 0 0 0px;" />
              </div>
              <div style="float:left;padding: 0 0 0 20px;text-align: center;">
                <div style="line-height: 30px;font-size: 32px;font-weight: bold">{{!!basicStatisticsData.coreCount?basicStatisticsData.coreCount.coreTrailerCount:0}}</div>
                <div style="line-height: 30px;font-weight: 600">货运挂车</div>
              </div>
              <div style="clear: both;"></div>
            </Card>
          </i-col>
          <i-col span="6" style="height: 100%;">
            <Card dis-hover style="height: 100%;background-image: linear-gradient(150deg,#B2B1F7,#7577EA);display:flex;align-items:center;justify-content:center;">
              <div style="float:left;">
                <img src="../../../assets/icon_renyuan.png" style="width:44px;margin: 5px 0 0 0px;" />
              </div>
              <div style="float:left;padding: 0 0 0 20px;text-align: center;">
                <div style="line-height: 30px;font-size: 32px;font-weight: bold">{{!!basicStatisticsData.coreCount?basicStatisticsData.coreCount.coreDriverCount:0}}</div>
                <div style="line-height: 30px;font-weight: 600">从业人员</div>
              </div>
              <div style="clear: both;"></div>
            </Card>
          </i-col>
          <i-col span="6" style="height: 100%;">
            <Card dis-hover style="height: 100%;background-image: linear-gradient(150deg, #8EC8FA,#68A9CE);display:flex;align-items:center;justify-content:center;">
              <div style="float:left;">
                <img src="../../../assets/icon_comr.png" style="width:36px;margin: 5px 0 0 0px;" />
              </div>
              <div style="float:left;padding: 0 0 0 20px;text-align: center;">
                <div style="line-height: 30px;font-size: 32px;font-weight: bold">{{!!basicStatisticsData.coreCount?basicStatisticsData.coreCount.coreDeptCount:0}}</div>
                <div style="line-height: 30px;font-weight: 600">运输企业</div>
              </div>
              <div style="clear: both;"></div>
            </Card>
          </i-col>
        </Row>
        <Row :gutter="10" style="height: calc(100% - 130px);">
          <i-col span="10" style="height: 100%;">
            <Card dis-hover style="height: 100%;">
              <p slot="title">车辆、挂车行驶证到期统计</p>
              <div style="height: 100%;">

                <div style="height: 50%;overflow: hidden;">
                  <Divider style="margin: 10px 0;font-size: 14px;">车辆行驶证到期</Divider>
                  <Row :gutter="10" style="padding: 10px 10px;">
                    <i-col span="6" style="height: 100%;text-align: center;padding-top: 10px;">
                      <div style="font-size: 18px;color: #ed4014;line-height: 30px;">{{!!basicStatisticsData.corePermit ? basicStatisticsData.corePermit.coreVehicleExpireCount:'0'}}</div>
                      <div style="font-size: 12px;color: #ada2a2;">已过期</div>
                    </i-col>
                    <i-col span="6" style="height: 100%;text-align: center;border-right: 1px solid #e8eaec;border-left: 1px solid #e8eaec;padding-top: 10px;">
                      <div style="font-size: 18px;color: #19be6b;line-height: 30px;">{{!!basicStatisticsData.corePermit ? basicStatisticsData.corePermit.coreVehiclePermitCount:'0'}}</div>
                      <div style="font-size: 12px;color: #ada2a2;">未过期</div>
                    </i-col>
                    <i-col span="6" style="height: 100%;text-align: center;border-right: 1px solid #e8eaec;padding-top: 10px;">
                      <div style="font-size: 18px;color: #ff9900;line-height: 30px;">{{!!basicStatisticsData.corePermit ? basicStatisticsData.corePermit.coreVehicleUnExpireCount:'0'}}</div>
                      <div style="font-size: 12px;color: #ada2a2;">即将到期</div>
                    </i-col>
                    <i-col span="6" style="height: 100%;text-align: center;padding-top: 10px;">
                      <div style="font-size: 18px;color: #5cadff;line-height: 30px;">{{!!basicStatisticsData.corePermit ? basicStatisticsData.corePermit.coreVehicleUnPermitCount:'0'}}</div>
                      <div style="font-size: 12px;color: #ada2a2;">未知</div>
                    </i-col>
                  </Row>
                </div>


                <div style="height: 50%;overflow: hidden;">
                  <Divider style="margin: 10px 0;font-size: 14px;">挂车行驶证到期</Divider>
                  <Row :gutter="10" style="padding: 10px 10px;">
                    <i-col span="6" style="height: 100%;text-align: center;padding-top: 10px;">
                      <div style="font-size: 18px;color: #ed4014;line-height: 30px;">{{!!basicStatisticsData.corePermit ? basicStatisticsData.corePermit.coreTrailerExpireCount:'0'}}</div>
                      <div style="font-size: 12px;color: #ada2a2;">已过期</div>
                    </i-col>
                    <i-col span="6" style="height: 100%;text-align: center;border-right: 1px solid #e8eaec;border-left: 1px solid #e8eaec;padding-top: 10px;">
                      <div style="font-size: 18px;color: #19be6b;line-height: 30px;">{{!!basicStatisticsData.corePermit ? basicStatisticsData.corePermit.coreTrailerPermitCount:'0'}}</div>
                      <div style="font-size: 12px;color: #ada2a2;">未过期</div>
                    </i-col>
                    <i-col span="6" style="height: 100%;text-align: center;border-right: 1px solid #e8eaec;padding-top: 10px;">
                      <div style="font-size: 18px;color: #ff9900;line-height: 30px;">{{!!basicStatisticsData.corePermit ? basicStatisticsData.corePermit.coreTrailerUnExpireCount:'0'}}</div>
                      <div style="font-size: 12px;color: #ada2a2;">即将到期</div>
                    </i-col>
                    <i-col span="6" style="height: 100%;text-align: center;padding-top: 10px;">
                      <div style="font-size: 18px;color: #5cadff;line-height: 30px;">{{!!basicStatisticsData.corePermit ? basicStatisticsData.corePermit.coreTrailerUnPermitCount:'0'}}</div>
                      <div style="font-size: 12px;color: #ada2a2;">未知</div>
                    </i-col>
                  </Row>
                </div>


              </div>
            </Card>
          </i-col>
          <i-col span="14" style="height: 100%;">
            <Card dis-hover style="height: 100%;">
              <p slot="title">车辆、挂车年限统计</p>
              <div style="height: 100%;" ref="lineChart2H">
                <lineChart6 :bottomHeight="lineChart2H" v-if="lineChart2H !== 0 && lineChart6PoliceData.type" :lineChart6Data="lineChart6PoliceData"></lineChart6>
              </div>
            </Card>
          </i-col>
        </Row>
      </i-col>
      <i-col span="10" style="height: 100%;width: calc(100% / 5 * 2);">
        <Card dis-hover style="height: 100%;">
          <p slot="title">从业身份统计</p>
          <Row :gutter="10" style="margin: 0 0 10px 0;height: calc(100% / 2 - 10px);">
            <i-col span="8" style="height: 100%;">
              <Card style="height: 100%;text-align: center;padding: 32px 0;">
                <div style="height: 100%;">
                  <div style="height: 40px;">
                    <img src="../../../assets/icon_jashiyuan.png" style="height: 100%;" />
                  </div>
                  <div style="font-size: 23px;line-height: 40px;">{{ !!basicStatisticsData.driverType?basicStatisticsData.driverType.coreDriverJSY:0 }}</div>
                  <div style="color: #A0A0A0;font-size: 12px;line-height: 30px;">驾驶员(人)</div>
                </div>
              </Card>
            </i-col>
            <i-col span="8" style="height: 100%;">
              <Card style="height: 100%;text-align: center;padding: 32px 0;">
                <div style="height: 100%;">
                  <div style="height: 40px;">
                    <img src="../../../assets/icon_zhuanxie.png" style="height: 100%;" />
                  </div>
                  <div style="font-size: 23px;line-height: 40px;">{{ !!basicStatisticsData.driverType?basicStatisticsData.driverType.coreDriverZXY:0 }}</div>
                  <div style="color: #A0A0A0;font-size: 12px;line-height: 30px;">装卸员(人)</div>
                </div>
              </Card>
            </i-col>
            <i-col span="8" style="height: 100%;">
              <Card style="height: 100%;text-align: center;padding: 32px 0;">
                <div style="height: 100%;">
                  <div style="height: 40px;">
                    <img src="../../../assets/icon_yayun.png" style="height: 100%;" />
                  </div>
                  <div style="font-size: 23px;line-height: 40px;">{{ !!basicStatisticsData.driverType?basicStatisticsData.driverType.coreDriverYYY:0 }}</div>
                  <div style="color: #A0A0A0;font-size: 12px;line-height: 30px;">押运员(人)</div>
                </div>
              </Card>
            </i-col>
          </Row>
          <Row :gutter="10" style="margin: 0 0 10px 0;height: calc(100% / 2 - 10px);">
            <i-col span="8" style="height: 100%;">
              <Card style="height: 100%;text-align: center;padding: 32px 0;">
                <div style="height: 100%;">
                  <div style="height: 40px;">
                    <img src="../../../assets/icon_fuzeren.png" style="height: 100%;" />
                  </div>
                  <div style="font-size: 23px;line-height: 40px;">{{ !!basicStatisticsData.driverType?basicStatisticsData.driverType.coreDriverAQFZ:0 }}</div>
                  <div style="color: #A0A0A0;font-size: 12px;line-height: 30px;">安全负责人(人)</div>
                </div>
              </Card>
            </i-col>
            <i-col span="8" style="height: 100%;">
              <Card style="height: 100%;text-align: center;padding: 32px 0;">
                <div style="height: 100%;">
                  <div style="height: 40px;">
                    <img src="../../../assets/icon_guanli.png" style="height: 100%;" />
                  </div>
                  <div style="font-size: 23px;line-height: 40px;">{{ !!basicStatisticsData.driverType?basicStatisticsData.driverType.coreDriverAQGL:0 }}</div>
                  <div style="color: #A0A0A0;font-size: 12px;line-height: 30px;">安全管理人员(人)</div>
                </div>
              </Card>
            </i-col>
            <i-col span="8" style="height: 100%;">
              <Card style="height: 100%;text-align: center;padding: 32px 0;">
                <div style="height: 100%;">
                  <div style="height: 40px;">
                    <img src="../../../assets/icon_qita.png" style="height: 100%;" />
                  </div>
                  <div style="font-size: 23px;line-height: 40px;">{{ !!basicStatisticsData.driverType?basicStatisticsData.driverType.coreDriverQT:0 }}</div>
                  <div style="color: #A0A0A0;font-size: 12px;line-height: 30px;">其他(人)</div>
                </div>
              </Card>
            </i-col>
          </Row>
        </Card>
      </i-col>
    </Row>
    <Row :gutter="10" style="height:363px;margin: 10px 0 0;margin-left: -5px;margin-right: -5px;">
      <i-col span="6" style="height: 100%;">
        <Card dis-hover style="height: 100%;">
          <p slot="title">车辆入网统计</p>
          <div style="height:100%;" ref="bingTuH">
            <bingTu :topHeight="bingTuHeight" v-if="bingTuHeight != 0 && coreInternet.coreMonitorType" :bingTuData="coreInternet"></bingTu>
          </div>
        </Card>
      </i-col>
      <i-col span="6" style="height: 100%;">
        <Card dis-hover style="height: 100%;">
          <p slot="title">车辆监管统计</p>
          <div style="height:100%;">
            <bingTu :topHeight="bingTuHeight" v-if="bingTuHeight != 0 && coreMonitor.coreMonitorType" :bingTuData="coreMonitor"></bingTu>
          </div>
        </Card>
      </i-col>
      <i-col span="6" style="height: 100%;">
        <Card dis-hover style="height: 100%;">
          <p slot="title">主动安全统计</p>
          <div style="height:100%;">
            <bingTu :topHeight="bingTuHeight" v-if="bingTuHeight != 0 && coreVideo.coreVideoType" :bingTuData="coreVideo"></bingTu>
          </div>
        </Card>
      </i-col>
      <i-col span="6" style="height: 100%;">
        <Card dis-hover style="height: 100%;">
          <p slot="title">培训授权统计</p>
          <div style="height:100%;">
            <bingTu :topHeight="bingTuHeight" v-if="bingTuHeight != 0 && driverAuth.driverAuthType" :bingTuData="driverAuth"></bingTu>
          </div>
        </Card>
      </i-col>
<!--      <i-col span="6" style="height: 100%;width: calc(100% / 5);">-->
<!--        <Card dis-hover style="height: 100%;">-->
<!--          <p slot="title">行驶证状态统计</p>-->
<!--          <div style="height:100%;">-->
<!--              <bingTu :topHeight="bingTuHeight" v-if="bingTuHeight != 0 && corePermit.corePermitType" :bingTuData="corePermit"></bingTu>-->
<!--          </div>-->
<!--        </Card>-->
<!--      </i-col>-->
    </Row>
    <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>
<script>
import regionalDiscount from "../../../components/Chart/lineChart/regionalDiscount";
import bingTu from "../../../components/Chart/lineChart/bingTu";
import lineChart6 from '../../../components/Chart/lineChart/lineChart6.vue'

export default {
  components: {
    regionalDiscount,
    bingTu,
    lineChart6,
  },
  data() {
    return {
      spinShow:false,//本页加载
      basicStatisticsData:{},
      bingTuHeight: 0,
      lineChart2H:0,

      driverAuth: {//授权
        "id": "driverAuth",
        "data": [],
        "unit": "人",
        "style": {
          "padding": [20, 20, 50, 20]
        },
        driverAuthType: false,
      },
      coreVideo: {//主动安全
        "id": "coreVideo",
        "data": [],
        "unit": "辆",
        "style": {
          "padding": [20, 20, 50, 20]
        },
        coreVideoType: false,
      },
      coreMonitor: {//监管车辆
        "id": "coreMonitor",
        "data": [],
        "unit": "辆",
        "style": {
          "padding": [20, 20, 50, 20]
        },
        coreMonitorType: false,
      },

      coreInternet: {//入网
        "id": "coreInternet",
        "data": [],
        "unit": "辆",
        "style": {
          "padding": [20, 20, 50, 20]
        },
        coreMonitorType: false,
      },

      lineChart6PoliceData: {//车辆、挂车年限统计
        type: false,
        "id": "charId7",
        "data": [],
        "unit": "公里",
        "style": {
          "padding": [30, 38, 30, 38]
        }
      },
    }
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    var that = this;
    that.$nextTick(function () {
      that.bingTuHeight = that.$refs.bingTuH.offsetHeight;
      that.lineChart2H = that.$refs.lineChart2H.offsetHeight;
      window.onresize = function () {
        that.bingTuHeight = that.$refs.bingTuH.offsetHeight;
        that.lineChart2H = that.$refs.lineChart2H.offsetHeight;
      };
    })

    that.spinShow = true;
    that.axios.post(that.apiUrl.statisticsPcCoreStatistics, {}).then(res => {
      if (!!res) {
        that.basicStatisticsData = res.data.data;


        //监管车辆
        that.coreMonitor.data = [
          {'item': '未监管', "percent": that.basicStatisticsData.coreMonitor.coreVehicleUnMonitorCount},
          {'item': '已监管', "percent": that.basicStatisticsData.coreMonitor.coreVehicleMonitorCount},
        ];
        that.coreMonitor.coreMonitorType = true;



        //入网
        that.coreInternet.data = [
          {'item': '未入网', "percent": that.basicStatisticsData.coreInternet.coreVehicleUnInternetCount},
          {'item': '已入网', "percent": that.basicStatisticsData.coreInternet.coreVehicleInternetCount},
        ];
        that.coreInternet.coreMonitorType = true;




        //授权
        that.driverAuth.data = [
          {'item': '已授权', "percent": that.basicStatisticsData.driverAuth.coreDriverAuthCount},
          {'item': '未授权', "percent": that.basicStatisticsData.driverAuth.coreDriverUnAuthCount},
        ];
        that.driverAuth.driverAuthType = true;

        //主动安全
        that.coreVideo.data = [
          {'item': '已开启', "percent": that.basicStatisticsData.coreVideo.coreVehicleVideoCount},
          {'item': '未开启', "percent": that.basicStatisticsData.coreVideo.coreVehicleUnVideoCount},
        ];
        that.coreVideo.coreVideoType = true;




        that.lineChart6PoliceData.data = [
          {company: '车辆',type:'一年',value:that.basicStatisticsData.coreVehicleYear.vehicleFiveYear},
          {company: '车辆',type:'两年',value:that.basicStatisticsData.coreVehicleYear.vehicleForeYear},
          {company: '车辆',type:'三年',value:that.basicStatisticsData.coreVehicleYear.vehicleOneYear},
          {company: '车辆',type:'四年',value:that.basicStatisticsData.coreVehicleYear.vehicleNullYear},
          {company: '车辆',type:'五年',value:that.basicStatisticsData.coreVehicleYear.vehicleThreeYear},
          {company: '车辆',type:'无登记',value:that.basicStatisticsData.coreVehicleYear.vehicleTwoYear},

          {company: '挂车',type:'一年',value:that.basicStatisticsData.trailerYear.coreTrailerOneYear},
          {company: '挂车',type:'两年',value:that.basicStatisticsData.trailerYear.coreTrailerTwoYear},
          {company: '挂车',type:'三年',value:that.basicStatisticsData.trailerYear.coreTrailerThreeYear},
          {company: '挂车',type:'四年',value:that.basicStatisticsData.trailerYear.coreTrailerForeYear},
          {company: '挂车',type:'五年',value:that.basicStatisticsData.trailerYear.coreTrailerFiveYear},
          {company: '挂车',type:'无登记',value:that.basicStatisticsData.trailerYear.coreTrailerNullYear},
        ];
        that.lineChart6PoliceData.type = true;


        that.spinShow = false;
      }
    }).catch(err => {
      console.log("失败", err)
    })






  },
  methods: {//执行的方法



  },
  watch: {//监听
  },
  props: {//接收来自父组件的数据

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态
    window.onresize = null;
  }
}
</script>
<style lang="less">
._wz_basicStatistics {
  height: 843px!important;

  .ivu-card-body {
    padding: 8px !important;
    height: calc(100% - 51px);
  }
}
</style>
